<template>
  <view class="container">
    <cu-custom bgColor="bg-gradual-green" :isBack="true">
      <block slot="backText">返回</block>
      <block slot="content">{{title}}</block>
    </cu-custom>
    <view style="margin-bottom: 150rpx;background-color: #FFFFFF;">
      <view class="tou" style="border-bottom: 2upx solid #F1F1F1;">
        <view class="zuo">
          {{datas.name}}
        </view>
        <view v-if="arrayLength && yuyue.rId" class="you" @click="jump" :data-src="'/pagesA/Preparation_plan/before_class?name='+datas.name+'&planCourseId='+id">
          <view class="lir">
            去上课 >
          </view>
        </view>
      </view>
      <!-- 热身训练 -->
      <view>
        <view class="boz">
          <view class="yi" style="background: #f5b150;"></view>
          <view class="err">热身训练</view>
        </view>
        <template v-if="datas.hotTraining && datas.hotTraining.length">
          <view class="xiong u-f-ajc" v-for="(item, index) in datas.hotTraining" :key="index">
            <view class="huise">
              <view class="zuoz">
                {{item.name}}
              </view>
              <view class="sanz">
                {{item.groupList.length}}组 X {{item.groupList[0]['次数']}}
              </view>
              <view class="shik" v-if="item.devicesIdArray || item.obstruction || item.restOfGroup">
                <text v-if="item.devicesIdArray">{{desctiy(item.devicesIdArray)}}.</text><text v-if="item.obstruction">{{item.obstruction}}KG.</text><text
                  v-if="item.restOfGroup">间休{{item.restOfGroup+'s'}}</text>
              </view>
            </view>
          </view>
        </template>
        <view v-else class="zwdz" style="border-bottom: 20upx solid #F1F1F1;">
          <view class="zzww">
            暂无动作
          </view>
        </view>
      </view>
      <view>
        <view class="boz">
          <view class="yi" style="background: #68D2C3;"></view>
          <view class="err">正式训练</view>
        </view>
        <template v-if="datas.formalTraining && datas.formalTraining.length">
          <view class="xiong u-f-ajc" v-for="(item, index) in datas.formalTraining" :key="index">
            <view class="huise">
              <view class="zuoz">
                {{item.name}}
              </view>
              <view class="sanz">
                {{item.groupList.length}}组 X {{item.groupList[0]['次数']}}
              </view>
              <view class="shik" v-if="item.devicesIdArray || item.obstruction || item.restOfGroup">
                <text v-if="item.devicesIdArray">{{desctiy(item.devicesIdArray)}}.</text><text v-if="item.obstruction">{{item.obstruction}}KG.</text><text
                  v-if="item.restOfGroup">间休{{item.restOfGroup+'s'}}</text>
              </view>
            </view>
          </view>
        </template>
        <view v-else class="zwdz" style="border-bottom: 20upx solid #F1F1F1;">
          <view class="zzww">
            暂无动作
          </view>
        </view>
      </view>
      <view>
        <view class="boz">
          <view class="yi" style="background: #809AF1;"></view>
          <view class="err">热身训练</view>
        </view>
        <template v-if="datas.relaxTraining && datas.relaxTraining.length">
          <view class="xiong u-f-ajc" v-for="(item, index) in datas.relaxTraining" :key="index">
            <view class="huise">
              <view class="zuoz">
                {{item.name}}
              </view>
              <view class="sanz">
                {{item.groupList.length}}组 X {{item.groupList[0]['次数']}}
              </view>
              <view class="shik" v-if="item.devicesIdArray || item.obstruction || item.restOfGroup">
                <text v-if="item.devicesIdArray">{{desctiy(item.devicesIdArray)}}.</text><text v-if="item.obstruction">{{item.obstruction}}KG.</text><text
                  v-if="item.restOfGroup">间休{{item.restOfGroup+'s'}}</text>
              </view>
            </view>
          </view>
        </template>
        <view v-else class="zwdz" style="border-bottom: 20upx solid #F1F1F1;">
          <view class="zzww">
            暂无动作
          </view>
        </view>
      </view>

    </view>
    <button @click="jump" :data-src="'/pagesA/Preparation_plan/Edit_course?planCourseId='+id+'&index='+index+'&experienceClass='+experienceClass"
      type="default" style="width: 80%;margin-left: 10%;background-color: #39BB9E;color: #FFFFFF;position: fixed;bottom: 50upx;">编辑课程</button>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        title: '预约课程',
        datas: {},
        id: '',
        index: '',
        experienceClass: '',
        yuyue: {},
      }
    },
    onLoad(e) {
      console.log(e)
      if (e.index) {
        this.title = `第${e.index}次课程`;
        this.index = e.index
      }
      this.id = e.id
      this.experienceClass = e.experienceClass
    },
    onShow() {
      this.yuyue = uni.getStorageSync('yuyue')
      uni.setStorageSync("names", '');
      uni.setStorageSync("numsDetail", '');
      uni.setStorageSync("hotTraining", '');
      uni.setStorageSync("formalTraining", '');
      uni.setStorageSync("relaxTraining", '');
      this.getData(this.id);
    },
    computed: {
      arrayLength() {
        if (this.datas.hotTraining ? this.datas.hotTraining.length : false) return true
        if (this.datas.formalTraining ? this.datas.formalTraining.length : false) return true
        if (this.datas.relaxTraining ? this.datas.relaxTraining.length : false) return true
        else return false
      }
    },
    methods: {
      desctiy(items) {
        return items.split('、')[0]
      },
      async getData(planCourseId) {
        let {
          data: {
            datas
          }
        } = await this.$myRuquest({
          url: "/coach/training/getTrainingPlanCourseDetail",
          data: {
            planCourseId
          }
        })
        console.log(datas)
        this.datas = datas;
      },

      jump(e) {
        console.log(e.currentTarget.dataset.src)
        if (e.currentTarget.dataset.src == 'Not-yet-open') {
          uni.showModal({
            title: '提示',
            content: '功能即将开放',
            showCancel: false,
            confirmColor: "#DD524D",
            success() {
              return
            }
          })
        } else {
          uni.navigateTo({
            url: e.currentTarget.dataset.src
          });
        }
      },

    }
  }
</script>

<style lang="scss" scoped>
  .container {
    width: 100%;
    height: 100vh;
    background-color: #FFFFFF;
  }

  .tou {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16upx 40upx;
  }

  .zuo {
    font-size: 34upx;
    font-weight: 555;
  }

  .you {
    border-radius: 26px;
    background: #55aaff;
    padding: 14upx 30upx;
  }

  .lir {
    border-radius: 20px;
    background: #0081FF;
    color: #ffffff;
    padding: 16upx 18upx;
  }

  .boz {
    display: flex;
    align-items: center;
  }

  .yi {
    width: 24upx;
    height: 24upx;
    margin: 40upx;
  }

  .err {
    font-size: 32upx;
    font-weight: 555;
  }

  .xiong {
    flex-direction: column;
  }

  .huise {
    width: 90%;
    background: #F1F1F1;
    display: flex;
    align-items: center;
    padding: 20rpx 30rpx;
    margin-bottom: 10rpx;
  }

  .zuoz {
    font-size: 28upx;
  }

  .sanz {
    font-size: 24upx;
    background: #86939f;
    padding: 14upx;
    color: #ffffff;
    margin-left: 20upx;
  }

  .shik {
    border: #86939F 1upx solid;
    font-size: 24upx;
    padding: 12upx;
    color: #abaeb3;
  }

  .zwdz {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .zzww {
    font-size: 30upx;
    color: #a2a2a2;
    margin: 40upx;
  }
</style>
